<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-24 14:56:49
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 16:14:25
-->
<template>
    <div>
        <a-modal v-model:open="modalOpen" title="售后问题" width="50%" :footer="null">
            <a-space direction="vertical" style="width: 100%" :size="16">
                <a-form :model="formData" ref="formRef" labelAlign="left" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
                    <a-form-item label="售后问题" name="title" :rules="[{ required: true, message: '输入售后问题' }]">
                        <a-input v-model:value="formData.title" placeholder="输入售后问题"/>
                    </a-form-item>
                    <a-form-item label="问题答案" name="content"  :rules="[{ required: true, message: '输入问题答案' }]">
                        <div style="border: 1px solid #ccc">
                            <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
                            <Editor style="height: 300px; overflow-y: hidden" v-model="formData.content" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
                        </div>
                    </a-form-item>
                    <a-form-item label="展示排序" name="sort" :rules="[{ required: true, message: '输入排序数字序号' }]">
                        <a-input v-model:value="formData.sort" placeholder="输入排序数字序号" />
                    </a-form-item>
                    <a-form-item label="展示位置" name="position"  :rules="[{ required: true, message: '请选择展示位置' }]">
                        <a-select ref="select" v-model:value="formData.position" placeholder="请选择展示位置">
                            <a-select-option :value="1">全部</a-select-option>
                            <a-select-option :value="2">商品详情</a-select-option>
                            <a-select-option :value="3">客服中心</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="状态" name="state"  :rules="[{ required: true, message: '请选择状态' }]">
                        <a-select ref="select" v-model:value="formData.state" placeholder="请选择状态">
                            <a-select-option :value="1">启用</a-select-option>
                            <a-select-option :value="0">禁用</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item :wrapper-col="{ offset: 9, span: 4 }">
                        <div class="btns center">
                        <a-space>
                            <a-button @click="handleCloseDialog">取消</a-button>
                            <a-button type="primary" @click="handleSubmit">确定</a-button>
                        </a-space>
                        </div>
                    </a-form-item>
                </a-form>
            </a-space>
        </a-modal>
    </div>
</template>
<script setup>
import { ref,shallowRef, onBeforeUnmount, onMounted } from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { saveProblem } from "@/api/sysConfig";

const editorRef = shallowRef()

const editorConfig = { placeholder: '请输入内容...' }
const toolbarConfig = {}
const modalOpen = ref(false);
const formData = ref({});
const formRef = ref(null);
const open = (record) => {
  modalOpen.value = true;
  formData.value = Object.assign({}, record);
};
function handleCloseDialog() {
  modalOpen.value = false;
  formData.value = {};
  formRef.value.resetFields();
}
const emits = defineEmits(["refreshList"]);
function handleSubmit() {
  formRef.value.validate().then(() => {
    if (!formData.value.typeId){
        formData.value.typeId = 3;
    }
    saveProblem(formData.value).then((res) => {
      if (res.code === 200) {
        handleCloseDialog();
        emits("refreshList");
      }
    });
  });
}
const handleCreated = (editor) => {
    editorRef.value = editor
}
onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })
defineExpose({ modalOpen, open })
</script>